// // 添加事件需要文档全部加载完毕后执行 所以需要load事件
// window.addEventListener('load', function () {
//     var preview_img = document.querySelector('.preview_img')
//     var mask = document.querySelector('.mask')
//     var big = document.querySelector('.big')
//     preview_img.addEventListener('mouseover', function () {
//         mask.style.display = 'block'
//         big.style.display = 'block'
//     })
//     preview_img.addEventListener('mouseout', function () {
//         mask.style.display = 'none'
//         big.style.display = 'none'
//     })

//     preview_img.addEventListener('mousemove', function (e) {
//         var x = e.pageX - this.offsetLeft
//         var y = e.pageY - this.offsetTop
//         var maskX = x - mask.offsetWidth / 2
//         var maskY = y - mask.offsetHeight / 2

//         var maskMax = preview_img.offsetWidth - mask.offsetWidth

//         maskX <= 0 ? maskX = 0 : maskX
//         maskX >= maskMax ? maskX = maskMax : maskX

//         maskY <= 0 ? maskY = 0 : maskY
//         maskY >= maskMax ? maskY = maskMax : maskY

//         mask.style.left = maskX + 'px'
//         mask.style.top = maskY + 'px'
//         //   大图片的移动距离 = 遮挡层移动距离*大图片最大移动距离/遮挡层最大移动距离
//         var bigImg = document.querySelector('.bigImg')
//         var big = document.querySelector('.big')
//         // 大图片大移动距离
//         var bigMax = bigImg.offsetWidth - big.offsetWidth
//         var bigX = maskX * bigMax / maskMax
//         var bigY = maskY * bigMax / maskMax
//         bigImg.style.left = -bigX + 'px'
//         bigImg.style.top = -bigY + 'px'
//     })
// })




// window.addEventListener('load', function () {
//     var preview_img = document.querySelector('.preview_img')
//     var mask = document.querySelector('.mask')
//     var big = document.querySelector('.big')
//     preview_img.addEventListener('mouseover', function () {
//         mask.style.display = 'block'
//         big.style.display = 'block'

//     })
//     preview_img.addEventListener('mouseout', function () {
//         mask.style.display = 'none'
//         big.style.display = 'none'
//     })
//     preview_img.addEventListener('mousemove', function (e) {
//         var x = e.pageX - preview_img.offsetLeft
//         var y = e.pageY - preview_img.offsetTop
//         var maskMax = preview_img.offsetWidth - mask.offsetWidth
//         var maskX = x - mask.offsetWidth / 2
//         var maskY = y - mask.offsetHeight / 2
//         maskX <= 0 ? maskX = 0 : maskX
//         maskX >= maskMax ? maskX = maskMax : maskX
//         maskY <= 0 ? maskY = 0 : maskY
//         maskY >= maskMax ? maskY = maskMax : maskY
//         mask.style.left = maskX + 'px'
//         mask.style.top = maskY + 'px'
//         // 大图片的移动距离 = 遮挡层移动距离*大图片最大移动距离 / 遮挡层最大移动距离
//         var bigImg = document.querySelector('.bigImg')
//         var bigMax = bigImg.offsetWidth - big.offsetWidth
//         var bigX = maskX * bigMax / maskMax
//         var bigY = maskY * bigMax / maskMax
//         bigImg.style.left = -bigX + 'px'
//         bigImg.style.top = -bigY + 'px'

//     })

// })




window.addEventListener('load', function () {
    var preview_img = document.querySelector('.preview_img')
    var mask = document.querySelector('.mask')
    var big = document.querySelector('.big')
    preview_img.addEventListener('mouseover', function () {
        mask.style.display = 'block'
        big.style.display = 'block'
    })
    preview_img.addEventListener('mouseout', function () {
        mask.style.display = 'none'
        big.style.display = 'none'
    })
    preview_img.addEventListener('mousemove', function (e) {
        var x = e.pageX - this.offsetLeft
        var y = e.pageY - this.offsetTop
        var maskX = x - mask.offsetWidth / 2
        var maskY = y - mask.offsetHeight / 2
        var maskMax = preview_img.offsetWidth - mask.offsetWidth
        maskX <= 0 ? maskX = 0 : maskX
        maskX >= maskMax ? maskX = maskMax : maskX
        maskY <= 0 ? maskY = 0 : maskY
        maskY >= maskMax ? maskY = maskMax : maskY
        mask.style.left = maskX + 'px'
        mask.style.top = maskY + 'px'
        // 公式 ：大图片移动距离= 遮挡层移动距离*大图片最大移动距离/遮挡层最大移动距离
        var bigImg = document.querySelector('.bigImg')
        // 大图片最大移动距离
        var bigMax = bigImg.offsetWidth - big.offsetWidth
        var bigX = maskX * bigMax / maskMax
        var bigY = maskY * bigMax / maskMax
        bigImg.style.left = -bigX + 'px'
        bigImg.style.top = -bigY + 'px'
    })
})










